<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<label style="display: none;" id="_manager_url" url="/user/manager"></label>
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>
        <!-- Main Content -->
        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <!--面包屑导航-->
                        <!--<ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">2013</a></li>
                            <li class="active">十一月</li>
                        </ol>-->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <label th:text="${user.id}?'修改':'添加'"></label>用户
                            </div>
                            <div class="panel-body form-group">
                                <form class="form-horizontal" role="form" id="actionForm" name="actionForm" method="post" th:action="@{/user/saveUser}">
                                    <div class="form-group">
                                        <label for="userName" class="col-sm-2 control-label">用户名</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="id" name="id" th:value="${user.id}">
                                            <input type="text" class="form-control" id="userName" name="userName" th:value="${user.userName}" placeholder="请输入用户名" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">密码</label>
                                        <div class="col-sm-4">
                                            <input type="password" class="form-control" id="password" name="password"
                                                   th:value="${user.password}" placeholder="请输入密码" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="confirmPassword" class="col-sm-2 control-label">确认密码</label>
                                        <div class="col-sm-4">
                                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                                                   th:value="${user.password}" placeholder="确认密码" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">性别</label>
                                        <div class="col-sm-offset-0 col-sm-2">
                                            男 <input type="radio" name="sex" value="M" th:checked="${#strings.equals('M', user.sex)}?checked">
                                            &nbsp;&nbsp;
                                            女 <input type="radio" name="sex" value="F" th:checked="${#strings.equals('F', user.sex)}?checked">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="roleCode" class="col-sm-2 control-label">角色</label>
                                        <div class="col-sm-offset-0 col-sm-4">
                                            <input type="hidden" th:value="${user.roleCode}" readonly="readonly" class="form-control" name="roleCode" id="roleCode" onclick="showRolesContainer()">
                                            <input type="text" th:value="${user.roleName}" readonly="readonly" class="form-control" name="roleName" id="roleName" onclick="showRolesContainer()">
                                        </div>
                                    </div>

                                    <!--<div class="form-group">
                                        <label for="status" class="col-sm-2 control-label">图片上传</label>
                                        <div class="col-sm-offset-0 col-sm-1">
                                            <input type="file" name="file" id="file" style="display: none;">
                                            <a href="javascript:void (0);" class="thumbnails">
                                                <img src="/static/images/add.jpg" style="width: 150px; height: 150px;"
                                                     alt="切换图片" onclick="$('#file').click();"
                                                     id="preview">
                                            </a>
                                        </div>
                                    </div>-->

                                    <!--<div class="form-group">
                                        &lt;!&ndash;<textarea rows="10" cols="5" id="planContent" name="planContent" style="display: none">
                                        </textarea>&ndash;&gt;
                                        <script id="container" name="file" type="text/plain"></script>
                                    </div>-->

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button" class="btn btn-info" id="btn-submit">
                                                <span class="fa fa-adjust"> 提交</span>
                                            </button>
                                            <button type="button" class="btn btn-info" onclick="document.location.replace(ctx + '/user/manager');">
                                                <span class="glyphicon glyphicon-backward"> 返回</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<!-- Modal -->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">xxxx查询</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <label for="searchRoleName" class="control-label">名称：</label>
                            <input type="text" class="form-control" id="searchRoleName" name="searchRoleName>
                        </div>

                        <div class="form-group">
                            <a href="javascript:void (0)" onclick="initTable()" class="btn btn-info btn-sm"><span
                                    class="fa fa-search"></span> 搜索</a>
                        </div>
                    </form>
                    <table id="dataTable"></table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="closeModalBtn">关闭</button>
                <button type="button" class="btn btn-success" id="confirmRoleBtn">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<style>
    .modal-dialog {
        width: 800px;
    }
</style>
<script type="text/javascript">

    function showRolesContainer() {
        $('#myModal').modal("show")
    }

    var roleName;
    var roleCode;
    function initTable() {
        $("#dataTable").bootstrapTable({
            url: ctx + "/role/roleListPage", // 获取表格数据的url
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20, 30, 50], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            // toolbar: '#toolbar', // 工具按钮用哪个容器
            // showRefresh: true,
            silent: true,
            uniqueId: "id",
            undefinedText: "-",
            contentType: "application/x-www-form-urlencoded",
            method: "post",
            singleSelect: true,
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit, // 每页要显示的数据条数
                    offset: params.pageNumber, // 每页显示数据的开始行号
                    sort: params.sort, // 要排序的字段
                    sortOrder: params.order, // 排序规则
                    roleName: $("#searchRoleName").val()
                }
            },
            sortName: 'id', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            columns: [
                {
                    field: 'roleName',
                    title: '名称',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'roleCode',
                    title: '编码',
                    align: 'center',
                    valign: 'middle'
                }
            ],
            responseHandler: function (res) {
                return {
                    "rows": res.data.rows, // 具体每一个bean的列表
                    "total": res.data.total // 总共有多少条返回数据
                }
            },
            onClickRow: function (row, element) {
                $("#dataTable tbody tr").css("backgroundColor", "#fff");
                element.css({"cursor": "pointer", "backgroundColor": "#e0e0ee"});
                roleName = row.roleName;
                roleCode = row.roleCode;
            }
        });
    }

    $(function () {

        $("#actionForm").validate({
            rules: {
                password: "required",
                confirmPassword: {
                    equalTo: "#password"
                }
            }
        });

        initTable();

        $("#confirmRoleBtn").click(function () {
            if (typeof roleName != undefined && roleName != null) {
                $("#roleName").val(roleName);
                $("#roleCode").val(roleCode);
                roleName = undefined;
                roleCode = undefined;
                $("#dataTable tbody tr").css("backgroundColor", "#fff");
            }
            $('#myModal').modal("hide");
        });

        $("#closeModalBtn").click(function () {
            roleName = undefined;
            roleCode = undefined;
            $('#myModal').modal("hide")
            $("#dataTable tbody tr").css("backgroundColor", "#fff");
        });

        $("#btn-submit").click(function () {
            // 提交表单
            var actionForm = $("#actionForm");
            var valid = actionForm.valid();
            if (!valid) {
                return;
            }
            actionForm.ajaxSubmit(function (rtn) {
                var code = rtn.code;
                if(code != 1 && code!= -1) {
                    Alert(rtn.message);
                    return;
                }
                Alert("操作成功", function () {
                    if (code == -1) {
                        document.location.replace(ctx + "/logout")
                        return;
                    }
                    document.location.replace(ctx + '/user/manager');
                });
            })
        });
    });
</script>
</html>